@import "./variables.scss";

$dividerColor: #808595;
$hkPrimaryColor: #bfcbd9;
$hkTxtSecondary: #909399;

$sidebarBgColor: #3f4353;
$bgColorDark: #111219;
$borderPrimaryColor: #1d212e;
$inputBgDard: rgb(27, 29, 40);
$textWhite: rgb(209, 209, 209);

.el-divider.el-divider--horizontal {
    margin: 4px 0;
    background-color: $dividerColor;
}

.el-progress__text {
    color: white;
}

.grid-container {
    display: grid;
    box-sizing: border-box;

    height: 100%;
}

.grid-item {
    overflow: hidden;
}

.orange-menu {
    background-color: transparent;
    border: none;

    .el-menu-item {
        height: 30px;
        line-height: 30px;
        font-size: 14px;

        //color: #A1A6C4;
        &:hover,
        &:focus,
        &.is-active,
        &:hover i {
            //color: #303133;
            //background: rgba(232, 244, 255, 0.2);
            background: transparent;
            color: #00a289 !important;
        }
    }
}

.group-title {
    color: whitesmoke;
    //font-size: 14px;
    font-size: 12px;
}

.icon-wrapper {
    display: inline-block;
    float: right;
    color: $hkTxtSecondary;

    &:hover {
        color: white;
        cursor: pointer;
    }
}

.icon-txt-right {
    float: none;
}

.group-color {
    width: 10px;
    height: 10px;
    border-radius: 8px;
    display: inline-block;
    background: $hkPrimaryColor;
    margin: 0 8px;

    &.grp-clr-red {
        background: #ff4949;
    }

    &.grp-clr-blue {
        background: #1890ff;
    }
}

.group-content-count {
    display: inline-block;
    float: right;
    color: $hkTxtSecondary;
}

//.el-tag--info{
//    background-color: rgb(44, 47, 62) !important;
//    border-color: rgb(64, 67, 82) !important;
//    color: whitesmoke !important;
//}

.el-input__inner {
    background-color: rgb(27, 29, 40);
    border: none;
    outline: none;
    color: #d1d1d1;
    font-size: 12px;
    font-family: Roboto, Helvetica Neue, Helvetica, PingFang SC,
        Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;

    //&:focus,
    //&:hover {
    //    border: 1px solid rgba(232, 244, 255, 0.5);
    //}
}

.el-textarea__inner {
    background: rgb(27, 29, 40);
    color: #d1d1d1;
    //border: 1px solid rgba(232, 244, 255, 0.2);
    border: none;
    //&:focus,
    //&:hover {
    //    border: 1px solid rgba(232, 244, 255, 0.5);
    //}

    //&:hover::-webkit-scrollbar-thumb {
    //    visibility: visible;
    //}
}

.el-textarea.is-disabled .el-textarea__inner {
    background: rgb(27, 29, 40);
    color: whitesmoke;
    //border: 1px solid rgba(232, 244, 255, 0.2);

    //&:hover::-webkit-scrollbar-thumb {
    //    visibility: visible;
    //}
}

.viewer-backdrop {
    background-color: #111219 !important;
}

.viewer-zoom-in::before,
.viewer-zoom-out::before,
.viewer-one-to-one::before,
.viewer-reset::before,
.viewer-prev::before,
.viewer-play::before,
.viewer-next::before,
.viewer-rotate-left::before,
.viewer-rotate-right::before,
.viewer-flip-horizontal::before,
.viewer-flip-vertical::before,
.viewer-close::before {
    line-height: 20px !important;
}

.gantt-task-filter-wrapper,
.folder-view-filter-wrapper {
    display: inline-block;
    padding: 0 2px;

    .filter {
        max-width: 138px !important;
        margin-left: 0 !important;
    }
}

.gantt-task-filter-wrapper {
    position: relative;
}

.gantt-task-filter-wrapper+.gantt-task-filter-wrapper {
    margin-left: 2px;
}

.gantt-task-filter-wrapper .panel,
.search-type-list-wrapper,
.folder-view-filter-wrapper .panel {
    .el-checkbox__input.is-checked .el-checkbox__inner {
        border-color: #00a289;
        background-color: #00a289;
    }

    .el-checkbox__inner:hover {
        border-color: #00a289;
    }

    .el-radio__input.is-checked+.el-radio__label,
    .el-checkbox.is-checked .el-checkbox__label {
        color: #00a289;
    }

    .el-checkbox__input.is-focus .el-checkbox__inner {
        border-color: #00a289;
    }

    .el-radio__inner:hover {
        border-color: #00a289;
    }

    .el-radio__input.is-checked .el-radio__inner {
        border-color: #00a289;
        background-color: #00a289;
    }
}

.filter-swith-btn {
    //border: none;
    background: transparent !important;
    color: whitesmoke !important;
    //border-color: rgba(232, 244, 255, 0.2);
    border: none;
    transition: border 0.28s;
    text-align: center;
    vertical-align: middle;
    line-height: 5px;
    font-family: Roboto, Helvetica Neue, Helvetica, PingFang SC,
        Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
    //&:hover {
    //    border-color: white;
    //}
}

.filter-btn-wrapper {
    position: relative;
}

.filter-clear-wrapper {
    display: flex;
    padding: 1px;
    justify-content: center;
    align-items: center;

    position: absolute;
    top: -4px;
    right: -4px;
    background: #545a71;
    border-radius: 50%;
    color: #aeb1bf;
    font-size: 10px;
    cursor: pointer;
}

.el-button {
    padding: 5px 10px;
}

.el-tag.el-tag--info,
.el-tag {
    background-color: rgb(83, 93, 113);
    color: $green;
    border-color: rgb(83, 93, 113);
    border-radius: 15px;

    .el-icon-close {
        color: whitesmoke;

        &:hover {
            background: #aaa;
        }
    }
}

.el-dialog {
    background-color: $bgColorLight;

    div,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    span,
    p {
        color: $textWhite;
    }
}

.el-tabs__item:hover {
    color: $greenLight;
}

.el-tabs__item.is-active {
    color: $greenLight;
}

.el-tabs__active-bar {
    background-color: $green;
}

.el-select__tags-text {
    color: $green;
}

.prompt {
    background: #323642;
    border: none;

    .el-message-box__message {
        color: whitesmoke;
    }

    .el-input__inner {
        //border-color: whitesmoke;
    }
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

*::-webkit-scrollbar {
    width: 9px;
    height: 8px;
}

*::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(144, 147, 153, 0.3);
    //visibility: hidden;
}

*::-webkit-scrollbar-track {
    border-radius: 10px;
    background: transparent;
}

.el-slider {
    .el-slider__runway {
        background: #16191f;
        height: 5px;

        .el-slider__bar {
            background: $green;
            height: 5px;
        }

        .el-slider__button-wrapper {
            top: -16px;

            .el-slider__button {
                border: none;
                border-radius: 20px;
                width: 6px;
                height: 16px;
                background: $hkTxtSecondary;

                &:hover {
                    background: #a1a6c4;
                }
            }
        }
    }
}

.splitpanes {
    &.sc-split-panes {
        .splitpanes__splitter {
            margin-left: 0;
            margin-right: 0;
            width: 5px;
            background-color: transparent;

            &:before {
                width: 5px;
                background-color: $green;
            }
        }

        &.splitpanes--vertical>.splitpanes__splitter:before {
            left: 0px;
            right: 0px;
        }
    }
}

.splitpanes__splitter {
    background-color: rgba(32, 32, 32, 0.8);
    position: relative;
    z-index: 7;
}

.splitpanes__splitter:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    transition: opacity 0.4s;
    background-color: rgba(32, 32, 32, 0.5);
    opacity: 0;
    z-index: 1;
}

.splitpanes__splitter:hover:before {
    opacity: 1;
}

.splitpanes--vertical>.splitpanes__splitter:before {
    left: -1px;
    right: -1px;
    height: 100%;
    //z-index: 10;
}

.splitpanes--horizontal>.splitpanes__splitter:before {
    top: -1px;
    bottom: -1px;
    width: 100%;
}

.el-scrollbar__bar.is-horizontal {
    z-index: 99;
}

.el-dialog__headerbtn {
    top: 10px;
    right: 10px;
}

.vld-overlay.is-active.is-full-page {
    position: absolute;
}

/* 右键菜单 */
.v-context {
    background: rgb(61, 65, 82) !important;

    * {
        color: #a1a6c4 !important;
    }
}

.v-context>li>a:hover,
.v-context>li>a:focus,
.v-context>li>a:hover>span,
.v-context ul>li>a:hover,
.v-context ul>li>a:hover>span .v-context ul>li>a:focus {
    color: #ffffff !important;
    background-color: #00a289 !important;
}

textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder {
    color: #595d71 !important;
}

textarea::-webkit-input-placeholder {
    font-size: 12px;
}

textarea::-moz-placeholder,
input::-moz-placeholder {
    color: #595d71 !important;
}

textarea:-ms-input-placeholder,
input:-ms-input-placeholder {
    color: #595d71 !important;
}

.comment-button-box {
    z-index: 2016;
    position: absolute;
    width: 100%;
    height: 36px;
    background-color: #323642;
    display: flex;
    align-items: center;
    padding: 0 10px;
    justify-content: space-between;

    .btn {
        background: #00a289;
        border-color: #00a289;
        color: #d6d6d6;
        height: 18px;
        padding: 0 10px;
        font-size: 14px;
    }
}

.el-upload-list__item-actions span.file-name {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

.viewer-3D-root {
    .stage-wrapper {
        //border: 1px solid red;
        width: 100%;
        height: 100%;

        .container {
            //border: 1px solid cyan;
            position: relative;

            display: flex;
            justify-content: center;

            //margin-top: 36px;
            width: 100%;
            height: 100%;

            .canvas-container,
            .comment-img {
                position: absolute !important;
                top: 0;
                z-index: 10;
            }
        }

        &.show-anno {
            height: calc(100% - 180px);
        }
    }

    .dg.main.a {
        overflow-y: auto;
        margin-top: 36px;
    }

    .dg.ac {
        position: absolute !important;
        top: 50px !important;
        right: 12% !important;
        z-index: 8 !important;

        .dg.main.a {
            margin-right: 2px;
        }
    }

    .dg.main li.folder:nth-child(3) .dg .cr.number {
        border-left-color: #806787;
    }

    .dg.main li.folder:nth-child(4) .dg .cr.string:nth-child(5) {
        border-left-color: #2fa1d6;
    }

    .dg.main li.folder:nth-child(4) .dg .cr.number {
        border-left-color: #2fa1d6;
    }

    .dg .slider {
        margin-left: 0;
    }

    li.cr.number.has-slider span.property-name {
        visibility: hidden;
    }

    li.folder:last-child li.cr.number.has-slider span.property-name {
        visibility: visible;
    }
}

.orangeRoot {

    >.container {
        >.splitpanes {
            >.splitpanes__splitter {
                //这个颜色其实是orange需要的视觉分割线，不是组件需要的
                border-left: 1px solid rgba(32, 32, 32, 0.8);
                margin-right: -5px;
                z-index: 9;
            }
        }
    }
}